<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
        @search="$refs.table.refresh(true)"
        @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
          }
        "
      >
        <template slot="toolForm">
          <a-form-item :label="$ct('workflowName','流程名称')">
            <a-input v-model="queryParam.modelName" :placeholder="$ct('workflowName','流程名称')" />
          </a-form-item>
          <a-form-item :label="$ct('workflowId','流程标识')">
            <a-input
              v-model="queryParam.modelKey"
              :placeholder="$ct('workflowId','流程标识')"
              style="width: 100%"
            />
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid
        ref="table"
        :columns="columns"
        :url="url"
        rowKey="id"
        showPagination="auto"
        :queryParam="queryParam"
        :showRowSelect="false"
      >
        <span slot="renderVersion" slot-scope="{ text, record, index }">
          <a-tag v-if="text" :color="'geekblue'">
            {{ "V:" + record.version }}
          </a-tag>
        </span>
        <span slot="renderAction" slot-scope="{ text, record }">
          <template>
            <a @click="deleteData(record)" class="action-delete">{{$ct("delete","删除")}}</a>
          </template>
        </span>
      </DataGrid>
      <!-- 流程图 -->
      <flow-chat ref="flowChatForm" />
    </div>
  </div>
</template>

<script>
import { DataGrid } from "@/components";
import flowChat from "../myMission/flowChat.vue";
import { dataGridMixin } from "@/mixins/dataGridMixin";
export default {
  name: "TableList",
  mixins: [dataGridMixin],
  components: {
    DataGrid,
    flowChat,
  },
  data() {
    return {
      columns: [
        {
          title: "流程名称",
          dataIndex: "name",
          width: 300,
          langCode: "workflowName",
        },
        {
          title: "流程标识",
          dataIndex: "key",
          langCode: "workflowId",
        },
        {
          title: "流程版本",
          dataIndex: "version",
          scopedSlots: {
            customRender: "renderVersion",
          },
          align: "center",
          langCode: "workflowVersion",
        },
        {
          title: "流程描述",
          dataIndex: "description",
          langCode: "workflowDescription",
        },
        {
          title: "操作",
          dataIndex: "action",
          width: 120,
          scopedSlots: {
            customRender: "renderAction",
          },
          align: "center",
        },
      ],
      queryParam: {},
      url: {
        getPageSet: "/workflow/apiFlowableTask/getDeployedPageSet",
      },
    };
  },
  methods: {
    // 流程图
    flowChart(record) {
      this.$post("/workflow/flowModel/getDetailByModelKey", {
        modelKey: record.key,
        procdefId: record.procdefId,
        type: "mode",
      }).then((res) => {
        if(300==res.statusCode){
            return  this.$message.warn(res.message, 1.5);
        }
        const jsonData = res.flowModel;
        this.$refs.flowChatForm.loadData(
          jsonData,
          jsonData.actDeModelId,
          jsonData.actDeModelKey,
          jsonData.actDeModelName,
          jsonData.flowDesign,
          record
        );
      });
    },
    // 删除
    deleteData(record) {
      let deploymentId = [],
        id = [],
        key = [];
      if (!record || record.length === 0) {
        this.$message.warn("请勾选需要删除的数据", 1.5);
        return;
      } else if (record && record[0]) {
        record.forEach((e) => {
          deploymentId.push(e.deploymentId);
          id.push(e.id);
          key.push(e.key);
        });
      } else {
        deploymentId = record.deploymentId;
        id = record.id;
        key = record.key;
      }
      const that = this;
      that.$confirm({
        title: "警告",
        content: `删除后用户已填写的数据将被一并删除且无法恢复，
同时引用该组件的所有流程功能均受影响，是否确定删除！`,
        okText: "确定",
        cancelText: "取消",
        closable: true,
        icon: () => that.$createElement('a-icon', {
          props: {
            key: 'warning',
            type: 'exclamation-circle',
            twoToneColor: '#faad14'
          }
        }),
        onOk() {
          return new Promise((resolve, reject) => {
          // 在这里调用删除接口
            that.$post("/workflow/apiFlowableTask/deployedDelete", {
              deploymentId: deploymentId.toString(),
              id: id.toString(),
              key: key.toString(),
            })
            .then((res) => {
              if (res.statusCode === 200) {
                that.$refs.table.refresh();
                that.$message.success(res.message);
                resolve();
              } else {
                that.confirmLoading = false;
                that.$message.error(res.message);
                reject();
              }
            });
          })
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
  },
};
</script>

<style lang="less"></style>
